<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Alone,Alone@an56.net">
<title>jquery-an-cover.js</title>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
/* 需要Cover的图片的父一级元素需要为块级元素并且限定宽高 */
.an-cover-test .thumbnail { display:block; width:100%; height:200px; }
</style>
</head>
<body>
<div class="container-fluid">
  <hr>
  <div class="row an-cover-test">

    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
      <a href="#" class="thumbnail"><img src="//lorempixel.com/800/400/" class="an-cover"></a>
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
      <a href="#" class="thumbnail"><img src="//lorempixel.com/400/800/" class="an-cover"></a>
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
      <a href="#" class="thumbnail"><img src="//lorempixel.com/600/400/" class="an-cover"></a>
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
      <a href="#" class="thumbnail"><img src="//lorempixel.com/400/600/" class="an-cover"></a>
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
      <a href="#" class="thumbnail"><img src="//lorempixel.com/700/400/" class="an-cover"></a>
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
      <a href="#" class="thumbnail"><img src="//lorempixel.com/400/700/" class="an-cover"></a>
    </div>

  </div>
  <hr>
</div>
<script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="./jquery-an-cover.js"></script>
<script>
jQuery(function($)
{

  //

});
</script>
</body>
</html>